<!--
 * @Project_description: 测试添加编辑
-->
<template>
  <div class='pages'>
    <el-dialog v-drag :before-close='handleClose' :title='title' :visible.sync='dialogVisible' width='33%'>
      <el-form ref='form' :disabled='loading' :model='form' :rules='rules' label-width='90px'>
        <el-row>
          <el-col :span='24'>
            <el-form-item label='上级菜单' prop='parentId'>
              <y-tree
                v-model='form.parentId'
                :normalizer='normalizer'
                :options='menuList'
                :show-count='true'
                placeholder='选择上级菜单'
              />
            </el-form-item>
          </el-col>
          <el-col :span='24'>
            <el-form-item label='菜单类型' prop='menuType'>
              <el-radio-group v-model='form.menuType'>
                <el-radio :label='1'>目录</el-radio>
                <el-radio :label='2'>菜单</el-radio>
                <el-radio :label='3'>按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='菜单名称' prop='permissionName'>
              <el-input v-model='form.permissionName' placeholder='请输入菜单名称' />
            </el-form-item>
          </el-col>

          <el-col v-if="form.menuType != '3'" :span='12'>
            <el-form-item label='菜单图标' prop='avatarImg'>
              <y-icon-select v-model='form.avatarImg' />
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType == '3'" :span='12'>
            <el-form-item prop='query'>
              <el-input v-model='form.query' maxlength='100' placeholder='请输入权限标识' />
              <span slot='label'>
                <el-tooltip content='前端用来控制按钮权限的字符，如：`add`' placement='top'>
                <i class='el-icon-question'></i>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType != '3'" :span='12'>
            <el-form-item prop='state'>
              <span slot='label'>
                <el-tooltip content='选择隐藏则路由将不会出现在侧边栏，但仍然可以访问' placement='top'>
                <i class='el-icon-question'></i>
                </el-tooltip>
                显示状态
              </span>
              <el-radio-group v-model='form.state'>
                <el-radio :label='0'>显示</el-radio>
                <el-radio :label='1'>隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='显示排序' prop='sortKey'>
              <el-input-number v-model='form.sortKey' :min='0' controls-position='right' />
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType != '3'" :span='12'>
            <el-form-item prop='permissionCode'>
              <span slot='label'>
                <el-tooltip content='访问的组件名称，如：`user`，如外网地址需内链访问则以`http(s)://`开头' placement='top'>
                <i class='el-icon-question'></i>
                </el-tooltip>
                组件名称
              </span>
              <el-input v-model='form.permissionCode' placeholder='请输入组件名称' />
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType == '2'" :span='12'>
            <el-form-item prop='path'>
              <span slot='label'>
                <el-tooltip content='访问的组件路径，如：`sys/menu/index`，默认在`views`目录下' placement='top'>
                <i class='el-icon-question'></i>
                </el-tooltip>
                组件路径
              </span>
              <el-input v-model='form.path' placeholder='请输入组件路径' />
            </el-form-item>
          </el-col>
          <el-col :span='24'>
            <el-form-item label='备注' prop='intro'>
              <el-input v-model='form.intro' :rows='3' maxlength='150'
                        placeholder='请输入备注' type='textarea' />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 下放按钮 -->
      <span slot='footer' class='dialog-footer'>
        <el-button :loading='loading' type='primary' @click='sumbit'>保 存</el-button>
        <el-button @click='dialogVisible = false'>取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import validator from '@/libs/utli.validator.js'

export default {
  name: 'menu-add',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    menuList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      loading: false,
      title: '添加',
      form: {
        parentId: 1,
        menuType: 1,
        intro: '',
        path: '',
        permissionCode: '',
        permissionName: '',
        query: '',
        sortKey: 0,
        state: 0,
        avatarImg: '',
      },
      //是否更新
      isPut: false,
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: validator.phone, trigger: 'blur' },
        ],
        value: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 方法集合
  methods: {
    //初始化
    init(row, id = '') {
      let _this = this
      if (row) {
        this.isPut = true
        this.title = '编辑'
        this.form = row
      } else {
        this.isPut = false
        this.form = {
          parentId: id || 1,
          menuType: 1,
          intro: '',
          path: '',
          permissionCode: '',
          permissionName: '',
          query: '',
          sortKey: 0,
          state: 0,
          avatarImg: '',
        }
      }
      this.dialogVisible = true
      //移除表单校验结果
      setTimeout(() => {
        _this.$refs.form.clearValidate()
      })
    },
    // 关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {
        })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {

      if (node.children && !node.children.length) {
        delete node.children
      }
      if (node.children == null || node.children == 'null') {
        delete node.children
      }
      return {
        id: node.permissionId,
        label: node.permissionName,
        children: node.children,
      }
    },
    //提交
    async sumbit() {
      let _this = this
      _this.$refs.form.validate(async (valid) => {
        if (valid) {
          _this.loading = true
          try {
            if (_this.isPut) {
              // 修改
              await _this.$api.menu.put(_this.form)
              _this.$message.success('修改成功')
            } else {
              // 添加
              await _this.$api.menu.add(_this.form)
              _this.$message.success('添加成功')
            }
            await _this.$emit('load')
            _this.dialogVisible = false
            _this.loading = false
          } catch (error) {
            _this.loading = false

          }
        } else {
          console.log('validate error')
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
